<template>
    <div class="app-container">
        <el-container>
            <el-container style="border: 1px solid #eee">
                <el-header style="text-align: left">
                    <span>资源列表</span>
                </el-header>
                <el-main>
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item>
                            <el-button v-if="hasPerm('sys:resource:add')"
                                    type="success"
                                    plain
                                    icon="el-icon-circle-plus-outline"
                                    size="mini"
                                    @click="openAddResource"
                            >新增
                            </el-button
                            >
                            <el-button v-if="hasPerm('sys:resource:edit')"
                                    type="primary"
                                    plain
                                    icon="el-icon-edit"
                                    size="mini"
                                    @click="openEditResource"
                            >编辑
                            </el-button
                            >
                            <el-button v-if="hasPerm('sys:resource:delete')"
                                    type="danger"
                                    plain
                                    icon="el-icon-delete"
                                    size="mini"
                                    @click="deleteResource"
                            >删除
                            </el-button
                            >
                        </el-form-item>
                    </el-form>
                    <el-table
                            :data="hasPerm('sys:resource:query')?resourceList:[]"
                            height="440"
                            ref="selectResource"
                            :highlight-current-row="true"
                            @selection-change="resourceChange"
                            @row-click="resourceClick"
                            row-key="id"
                            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                        <el-table-column prop="id" label="id" align="left" v-if="false"></el-table-column>
                        <el-table-column prop="title" label="标题" align="left"></el-table-column>
                        <el-table-column prop="icon" label="图标" align="left"></el-table-column>
                        <el-table-column prop="path" label="路径" align="left" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="component" label="组件" align="left" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="hiddenFlag" label="是否显示" align="left" width="100">
                            <template slot-scope="scope">
                                <el-switch
                                        v-model="scope.row.hiddenFlag"
                                        :active-value="0"
                                        :inactive-value="1"
                                        disabled
                                ></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sortNum" label="排序" align="left" width="50"></el-table-column>
                    </el-table>
                </el-main>
            </el-container>
            <el-container style="border: 1px solid #eee">
                <el-header style="text-align: left">
                    <span>权限列表</span>
                </el-header>
                <el-main style="width: 500px">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item>
                            <el-button v-if="hasPerm('sys:permission:add')"
                                    type="success"
                                    plain
                                    icon="el-icon-circle-plus-outline"
                                    size="mini"
                                    @click="openAddPermission"
                            >新增
                            </el-button
                            >
                            <el-button v-if="hasPerm('sys:permission:edit')"
                                    type="primary"
                                    plain
                                    icon="el-icon-edit"
                                    size="mini"
                                    @click="openEditPermission"
                            >编辑
                            </el-button
                            >
                            <el-button v-if="hasPerm('sys:permission:delete')"
                                    type="danger"
                                    plain
                                    icon="el-icon-delete"
                                    size="mini"
                                    @click="deletePermission"
                            >删除
                            </el-button
                            >
                        </el-form-item>
                        <el-form-item>
                            <el-input v-if="hasPerm('sys:permission:query')"
                                    placeholder="名称/标识"
                                    size="mini"
                                    clearable
                                    v-model.trim="key"
                                    @keyup.enter.native="getPermissionList"
                                    style="width:120px"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button v-if="hasPerm('sys:permission:query')"
                                    type="primary"
                                    icon="el-icon-search"
                                    plain
                                    size="mini"
                                    @click="getPermissionList"
                            >查询
                            </el-button
                            >
                        </el-form-item>
                    </el-form>
                    <el-table
                            :data="hasPerm('sys:permission:query')?permissionList:[]"
                            height="440"
                            ref="selectPermission"
                            :highlight-current-row="true"
                            @selection-change="permissionChange"
                            @row-click="permissionClick"
                    >
                        <el-table-column label="序号" width="50" align="center">
                            <template slot-scope="scope">
                                {{ (page - 1) * limit + scope.$index + 1 }}
                            </template>
                        </el-table-column>

                        <el-table-column label="id" v-if="false" prop="id">
                        </el-table-column>

                        <el-table-column align="left" label="权限名称" prop="name" show-overflow-tooltip>
                        </el-table-column>

                        <el-table-column align="left" label="权限标识" prop="code" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column align="left" label="所属资源" prop="resourceName" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column align="left" label="排序" prop="sortNum" width="50">
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-sizes="[8, 15, 30, 50]"
                            :page-size="limit"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="parseInt(total)"
                    >
                    </el-pagination>

                </el-main>
            </el-container>
        </el-container>

        <!--新增和编辑窗口 -->
        <el-dialog
                :visible.sync="resourceVisible"
                :title="resourceType === 'edit' ? '编辑资源' : '新增资源'"
        >
            <el-form
                    :model="resource"
                    label-width="80px"
                    label-position="right"
                    :rules="rules"
                    ref="resourceForm"
            >
                <el-form-item label="资源标题" prop="title">
                    <el-input v-model="resource.title" placeholder="请输入标题"/>
                </el-form-item>

                <el-form-item label="id" prop="id" v-if="false">
                    <el-input v-model="resource.id"/>
                </el-form-item>

                <el-form-item label="上级资源" v-if="resourceType==='add'">
                    <treeselect v-model="selectParent" :options="resourceList"
                                :show-count="true" placeholder="请选择上级资源" @select="parentSelect"
                                :normalizer="normalizer"/>
                </el-form-item>
                <el-form-item label="路径" prop="path">
                    <el-input v-model="resource.path" placeholder="如：/sys"/>
                </el-form-item>
                <el-form-item label="组件">
                    <el-input v-model="resource.component" placeholder="如：/sys/resource/list"/>
                    <div class="el-form-item__warning">
                        默认为Layout
                    </div>
                </el-form-item>
                <el-form-item label="图标">
                    <el-input v-model="resource.icon" placeholder="请输入图标"/>
                </el-form-item>
                <el-form-item label="是否显示">
                    <el-radio v-model="resource.hiddenFlag" :label="0">是</el-radio>
                    <el-radio v-model="resource.hiddenFlag" :label="1">否</el-radio>
                </el-form-item>

                <el-form-item label="排序号"
                ><!--:precision="0"控制数值的精度-->
                    <el-input-number
                            v-model="resource.sortNum"
                            controls-position="right"
                            :min="1"
                            :precision="0"
                    ></el-input-number>
                </el-form-item>
            </el-form>
            <div style="text-align: right">
                <el-button type="danger" @click="resourceVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmForm('resourceForm')">确认</el-button>
            </div>
        </el-dialog>

        <!--新增和编辑窗口 -->
        <el-dialog
                :visible.sync="permissionVisible"
                :title="permissionType === 'edit' ? '编辑权限' : '新增权限'"
        >
            <el-form
                    :model="permission"
                    label-width="80px"
                    label-position="right"
                    :rules="rules2"
                    ref="permissionForm"
            >
                <el-form-item label="权限名称" prop="name">
                    <el-input v-model="permission.name" placeholder="请输入名称"/>
                </el-form-item>

                <el-form-item label="id" v-if="false">
                    <el-input v-model="permission.id"/>
                </el-form-item>

                <el-form-item label="所属资源" prop="resourceId">
                    <treeselect v-model="selectResource2" :options="resourceList"
                                :show-count="true" placeholder="请选择所属资源" @select="resourceSelect"
                                :normalizer="normalizer" :noChildrenText="'无'" :searchable="false"/>
                </el-form-item>
                <el-form-item label="权限标识" prop="code">
                    <el-input v-model="permission.code" placeholder="如：sys:user:list"/>
                </el-form-item>

                <el-form-item label="排序号"
                ><!--:precision="0"控制数值的精度-->
                    <el-input-number
                            v-model="permission.sortNum"
                            controls-position="right"
                            :min="1"
                            :precision="0"
                    ></el-input-number>
                </el-form-item>
            </el-form>
            <div style="text-align: right">
                <el-button type="danger" @click="permissionVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmForm2('permissionForm')">确认</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import resourceApi from '@/api/sys/resource'
    import permissionApi from '@/api/sys/permission'

    const defaultModel = {
        id: '',
        parentId: '',
        hiddenFlag: 0,
        sortNum: 1,
        type: '',
        title: '',
        path: '',
        component: '',
        icon: ''
    }

    const defaultModel2 = {
        id: '',
        resourceId: '',
        resourceName: '',
        name: '',
        code: '',
        sortNum: 1
    }

    export default {
        components: { Treeselect },
        data() {
            return {
                resourceList: [],

                resourceVisible: false,
                resourceType: 'add',
                resource: Object.assign({}, defaultModel),
                selectParent: null,//树形下拉框选中的值的id，必须为null
                selectResource: [],//选择的资源(表格的)
                permissionList: [],
                permissionVisible: false,
                selectPermission: [],
                permissionType: 'add',
                permission: Object.assign({}, defaultModel2),
                selectResource2: null,//添加权限时的
                page: 1, //当前页
                limit: 8, //每页记录数
                total: 0, //总记录数
                key: '',
                rules: {
                    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                    path: [{ required: true, message: '请输入路径', trigger: 'blur' }]
                },
                rules2: {
                    code: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
                    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                    resourceId: [{ required: true, message: '请选择资源', trigger: 'change' }]
                }
            }
        },
        watch: {},
        created() {
            this.getResourceList()
            this.getPermissionList()
        },
        methods: {
            getPermissionList() {
                permissionApi.getPageList(this.page, this.limit, this.key).then((response) => {
                    this.permissionList = response.data.list
                    this.total = response.data.total
                })
            },
            handleSizeChange(val) {
                this.limit = val
                this.getPermissionList()
            },
            handleCurrentChange(val) {
                this.page = val
                this.getPermissionList()
            },
            /**
             * 当选择改变时
             */
            resourceChange(val) {
                let me = this
                me.selectResource = val
            },

            /**点击 */
            resourceClick(row) {
                let me = this
                me.$refs.selectResource.clearSelection()
                me.$refs.selectResource.toggleRowSelection(row, true)
            },
            getResourceList() {
                resourceApi.getTreeList().then((response) => {
                    this.resourceList = response.data
                })
            },
            openAddResource() {
                this.resourceType = 'add'
                this.resourceVisible = true
                this.resource = Object.assign({}, defaultModel)
            },
            openEditResource() {
                if (this.selectResource.length !== 1) {
                    this.$message({
                        showClose: true,
                        message: '请选择资源',
                        type: 'warning'
                    })
                    return
                }
                this.resource = Object.assign({}, this.selectResource[0])
                this.resourceType = 'edit'
                this.resourceVisible = true
            },
            parentSelect(node) {
                this.resource.parentId = node.id
                this.selectParent = node.id
            },
            resourceSelect(node) {
                this.permission.resourceId = node.id
                this.selectResource2 = node.id
            },
            normalizer(node) {
                return {
                    id: node.id,
                    label: node.title,
                    children: node.children
                }
            },
            confirmForm(formName) {
                const isEdit = this.resourceType === 'edit'
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (isEdit) {
                            resourceApi.update(this.resource).then((response) => {
                                //请求成功
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                })
                                this.resourceVisible = false
                                this.getResourceList()
                            })
                        } else {
                            resourceApi.insert(this.resource).then((response) => {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                })
                                this.resourceVisible = false
                                this.getResourceList()
                            })
                        }
                    } else {
                        return false
                    }
                })
            },
            deleteResource() {
                if (this.selectResource.length !== 1) {
                    this.$message({
                        showClose: true,
                        message: '请选择一个资源',
                        type: 'warning'
                    })
                    return
                }
                this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    resourceApi.delete(this.selectResource[0].id).then((response) => {
                        this.$message({
                            showClose: true,
                            message: '删除成功',
                            type: 'success'
                        })
                        this.getResourceList()
                        this.getPermissionList()
                    })
                })
            },
            deletePermission() {
                if (this.selectPermission.length !== 1) {
                    this.$message({
                        showClose: true,
                        message: '请选择一个权限',
                        type: 'warning'
                    })
                    return
                }
                this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    permissionApi.delete(this.selectPermission[0].id).then((response) => {
                        this.$message({
                            showClose: true,
                            message: '删除成功',
                            type: 'success'
                        })
                        this.getPermissionList()
                    })
                })
            },
            openAddPermission() {
                this.permissionVisible = true
                this.permissionType = 'add'
                this.permission = Object.assign({}, defaultModel2)
                this.selectResource2 = null
                this.getResourceList()
            },
            openEditPermission() {
                if (this.selectPermission.length !== 1) {
                    this.$message({
                        showClose: true,
                        message: '请选择权限',
                        type: 'warning'
                    })
                    return
                }
                this.getResourceList()
                this.permission = Object.assign({}, this.selectPermission[0])
                this.selectResource2 = this.permission.resourceId
                this.permissionType = 'edit'
                this.permissionVisible = true
            },
            /**
             * 当选择改变时
             */
            permissionChange(val) {
                let me = this
                me.selectPermission = val
            },

            /**点击 */
            permissionClick(row) {
                let me = this
                me.$refs.selectPermission.clearSelection()
                me.$refs.selectPermission.toggleRowSelection(row, true)
            },
            confirmForm2(formName) {
                const isEdit = this.permissionType === 'edit'
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (isEdit) {
                            permissionApi.update(this.permission).then((response) => {
                                //请求成功
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                })
                                this.permissionVisible = false
                                this.getPermissionList()
                            })
                        } else {
                            permissionApi.insert(this.permission).then((response) => {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                })
                                this.permissionVisible = false
                                this.getPermissionList()
                            })
                        }
                    } else {
                        return false
                    }
                })
            }
        }
    }
</script>
